<template>
    <view :style="{minHeight:serH+'px'}">
        <view class="hot-text" style="padding-top: 130upx">搜索历史</view>
        <view v-if="keys[team.id]" class="hot-wrap" @click.stop="search(item)"
              style="display: flex;justify-content: space-between;margin-bottom: 20upx"
              v-for="(item,index) in keys[team.id]">
            <view style="color: #B7B6B6;font-size: 32upx;display: flex" >
                <view class="iconfont">&#xe620;</view>
                <view style="margin-top:-4upx;margin-left: 10upx;font-size: 28upx">{{item}}</view>
            </view>
            <view @click.stop="del(index)"  style="width: 60upx;display: flex;flex-direction: row-reverse">
                <text   class="iconfont" style="font-size:32upx;color: #B7B6B6">&#xe606;</text>
            </view>
        </view>
        <view  style="color: #B5B5B5;font-size: 28upx;text-align: center;margin-top: 60upx">
            <text @click.stop="del(keys[team.id].length?100:-1)">{{keys[team.id].length?'清空搜索历史':'暂无搜索历史'}}</text>
        </view>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    export default {
        components:{
        },
        props:['keys'],
        data() {
            return {
                navH:0,
                serH:0,
                team:uni.getStorageSync('team')?JSON.parse(uni.getStorageSync('team')):{name:'团队',id:0},
            }
        },
        onLoad(){
            this.navH=this.navHeight()
            this.serH=uni.getSystemInfoSync().windowHeight-this.navH-100
        },
        methods:{
            del(index){
                if(index<0){
                    return
                }
                if(index==100){
                    this.keys[this.team.id]=[]
                }else{
                    this.keys[this.team.id].splice(index,1)
                }
                uni.setStorage({
                    key: 'keys',
                    data: JSON.stringify(this.keys),
                    success: function () {
                    }
                });
            },
            search(key){
                this.$emit('search',key)
                // uni.navigateTo({
                //     url: '../index/knowledge?key='+key
                // });
            }
        }
    }
</script>

<style>
    .hot-text{
        padding:30upx 0 0 30upx ;
        color: rgba(16, 16, 16, 1);
        font-size: 40upx;
        font-family: PingFangSC-bold;
        margin-bottom: 20upx;
    }
    .hot-wrap{
        display: flex;
        flex-wrap: wrap;
        padding: 0 30upx;
    }
</style>
